<template>
  <div>
    <div class="text">
      <span style="margin-right: 20px;">搜索用户数</span>
      <!-- 感叹号 -->
      <svg t="1657555582333" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2264"
        width="16" height="16">
        <path d="M509.92 795.84c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z m0 48C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m-2.448-400.704h16a16 16 0 0 1 16 16v201.728a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V459.136a16 16 0 0 1 16-16z m0-100.176h16a16 16 0 0 1 16 16v23.648a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-23.648a16 16 0 0 1 16-16z"
          p-id="2265"></path>
      </svg>
    </div>
    <div>
      123123 12.1
      <svg t="1657556728952" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3314"
        width="16" height="16">
        <path d="M703.280488 365.511671c-4.329609 10.697643-13.921058 17.040095-25.236777 17.040095L544.234145 382.551766 544.234145 835.109955c0 17.838274-14.398942 32.296567-32.232099 32.296567-17.838274 0-32.236192-14.458293-32.236192-32.296567L479.765855 382.551766l-134.206608 0c-11.314697 0-20.906146-6.342452-25.234731-17.040095-4.330632-10.69969-2.081405-22.148439 5.92085-30.334889l166.241208-170.104189c5.333472-5.459339 11.773138-8.1711 19.315928-8.1711 7.543813 0 13.982456 2.742461 19.316951 8.201799l166.241208 170.068374C705.358823 343.358115 707.610096 354.813005 703.280488 365.511671z"
          p-id="3315" fill="#1afa29"></path>
      </svg>
      <svg t="1657556792713" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4459"
        width="16" height="16">
        <path d="M800.9 646.9c-9.4-9.4-24.6-9.3-33.9 0.1L536.1 878.7V88c0-13.3-10.7-24-24-24s-24 10.7-24 24v790.3L257.6 647.2c-9.4-9.4-24.6-9.4-33.9 0-9.4 9.4-9.4 24.6 0 33.9l271.5 272.3c4.7 4.7 10.8 7.1 17 7.1 5.2 0 10.3-1.7 14.6-5 1.4-0.9 2.7-1.9 3.9-3.1L801 680.8c9.4-9.4 9.3-24.6-0.1-33.9z"
          p-id="4460" fill="#d81e06"></path>
      </svg>
    </div>
    <!-- 折线图 -->
    <!-- 容器 -->
    <div ref="line" class="charts"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    mounted() {
      let charts = echarts.init(this.$refs.line)
      charts.setOption({
        // 隐藏x轴
        xAxis: {
          show: false,
          // 添加折线节点(均分)
          type: 'category',
        },
        // 隐藏y轴
        yAxis: {
          show: false,
        },
        series: [{
          // 图表类型
          type: 'line',
          // 图表数据
          data: ['10', '20', '30', '1', '70'],
          // 拐点隐藏
          itemStyle: {
            opacity: 0
          },
          // 折线颜色
          lineStyle: {
            color: 'skyblue'
          },
          // 折线填充颜色(渐变)
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'skyblue' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#fff' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          // 平滑折线
          smooth: true
        }],
        // 画板布局
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
      })
    }
  }
</script>
</script>

<style scoped>
  .text {
    display: flex;
    align-items: center;
  }

  .charts {
    width: 100%;
    height: 100px;
  }
</style>
